<template>
  <div>
    <nav class="navbot">
      <ul>
        <li>
          <!-- javascript:; 不跳转，会有链接的手型 -->
          <router-link to="/index">
            <a href="javascript:;">
              <img src="images/nav1.png" alt class="n_img" />
              <img src="images/nav1_h.png" alt class="n_img2" />
              <p>首页</p>
            </a>
          </router-link>
        </li>
        <li>
          <router-link to="/home">
            <a href="javascript:;">
              <img src="images/nav2.png" alt class="n_img" />
              <img src="images/nav2_h.png" alt class="n_img2" />
              <p>房源</p>
            </a>
          </router-link>
        </li>
        <li>
          <router-link to="/say">
            <a href="javascript:;">
              <img src="images/nav3.png" alt class="n_img" />
              <img src="images/nav3_h.png" alt class="n_img2" />
              <p>资讯</p>
            </a>
          </router-link>
        </li>
        <li>
          <router-link to="/my">
            <a href="javascript:;">
              <img src="images/nav4.png" alt class="n_img" />
              <img src="images/nav4_h.png" alt class="n_img2" />
              <p>我的</p>
            </a>
          </router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  name: "Nav",
  components: {},
};
</script>

<style scoped>
.n_img2 {
  display: none;
}
.nav_active p {
  color: #6e2d35;
}
.nav_active .n_img {
  display: none;
}
.nav_active .n_img2 {
  display: block;
}
</style>
